﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        /* Start and stop animations using functions. */
        function startAnimation() {
            $("#content").html($("#content").html() + "function started <br />");
        }
        function stopAnimation() {
            $("#content").html($("#content").html() + "function stoped <br />");
        }

        /* Anim class. */
        var Anim = function () {
            this.name = "I am what i am!";
        };
        Anim.prototype.start = function () {
            $("#content").html($("#content").html() + this.name + " started <br />");
        };
        Anim.prototype.stop = function () {
            $("#content").html($("#content").html() + this.name + " stopped <br />");
        };

        /* Anim class, with a slightly different syntax for declaring methods. */
        var Anim1 = function () {

        };
        Anim1.prototype = {
            start: function () {
                $("#content").html($("#content").html() + "Anim1 started <br />");
            },
            stop: function () {
                $("#content").html($("#content").html() + "Anim1 stopped <br />");
            }
        };

        /* Add a method to the Function object that can be used to declare methods. */
        Function.prototype.method = function (name, fn) {
            this.prototype[name] = fn;
            /*chained*/
            return this;
        };

        /* Anim class, with methods created using a convenience method. */
        var Anim2 = function () {

        };
        Anim2.method('start', function () {
            $("#content").html($("#content").html() + "Anim2 started <br />");
        });
        Anim2.method('stop', function () {
            $("#content").html($("#content").html() + "Anim2 stopped <br />");
        });

        /* chained */
        var Anim3 = function () {

        };
        Anim3.method('start', function () {
            $("#content").html($("#content").html() + "Anim3 started <br />");
        })
        .method('stop', function () {
            $("#content").html($("#content").html() + "Anim3 stopped <br />");
        });

        $(function () {
            // Handler for .ready() called.
            startAnimation();
            stopAnimation();

            /* Usage. */
            var myAnim = new Anim();
            myAnim.start();
            myAnim.stop();

            myAnim = new Anim1();
            myAnim.start();
            myAnim.stop();

            myAnim = new Anim2();
            myAnim.start();
            myAnim.stop();

            myAnim = new Anim3();
            myAnim.start();
            myAnim.stop();
        });
    </script>
</head>
<body>
    <div id="content">
    </div>
</body>
</html>
